<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogVisible"
    width="360px"
    top="5vh"
    @open="open"
  >
    <div class="user-display-center">
      <h-user-display v-model="value"></h-user-display>
    </div>
    <el-form :model="value" :rules="rules" labelPosition="top" ref="form" class="custom-form">
      <el-form-item label="会员等级:" prop="vipId">
        <el-row :gutter="20">
          <el-col :span="24">
            <h-user-grade-select v-model="value" @change="change"></h-user-grade-select>
          </el-col>
        </el-row>
      </el-form-item>
    </el-form>
    <div slot="footer">
      <el-button type="primary" @click="save"> 确定修改</el-button>
      <el-button @click="closed">关闭</el-button>
    </div>
  </el-dialog>
</template>


<script>
  import AdminService from 'src/service/admin'
  import Dialog from 'src/components/common/js/dialog-mix'
  import HUserDisplay from 'src/components/common/display/HUserDisplay'
  import HUserGradeSelect from '../../common/select/HUserGradeSelect'

  export default {
    name: 'HAdminCustomerEditDialog',
    components: {HUserGradeSelect, HUserDisplay},
    mixins: [Dialog],
    data() {
      return {
        currentData: null,
        rules: {
          vipId: [
            {required: true, message: '请选择一个用户等级', trigger: 'blur'}
          ]
        }
      }
    },
    watch: {
      value: function (newValue, oldValue) {
        this.currentData = null
      }
    },
    props: {
      value: {
        type: Object,
        default: {}
      }
    },
    methods: {
      open: function () {
        this.form = {
          password: '',
          rePassword: ''
        }
      },
      change: function (data) {
        this.currentData = data
      },
      save: function () {
        const me = this
        this.$refs.form.validate((valid) => {
          if (valid) {
            AdminService.userGradeChange({
              userIds: [me.value.id],
              gradeId: me.value.vipId
            }).then(ds => {
              if (ds != null) {
                me.$message.success('修改用户等级成功。')
                me.$emit('success', me.currentData)
              }
            })
          } else {
            return false
          }
        })

      }
    }
  }
</script>
